<template>
  <div class="big_header">
    <!--    <img src="../../../assets/logo/ls-logo.png" class="ls-logo" alt="" />-->
    <span class="header_title">{{ title }}</span>
    <!--    <span class="header_title" v-if="nameLv == 2">丽水市“两小”创业通【{{ currentName }}】数据驾驶舱</span>
    <span class="header_title" v-if="nameLv == 3">丽水市“两小”创业通户籍地数据驾驶舱</span>-->
    <img class="line_1" src="../../../assets/images/header_text.gif" />
    <div class="line_2"></div>

    <div class="span_wrap">
      <!--      <img src="../../../assets/images/time_logo.png" alt="" />
      <span>{{ yyr }}</span>-->
    </div>
  </div>
</template>

<script>
import { formatDate } from '../left/timeFormat'
export default {
  data() {
    return {
      yyr: '',
      currentName: '中国',
      nameLv: 1,
      title: '三台县域外川连通',
    }
  },
  props: {},
  created() {
    this._getDate()
  },
  mounted() {
    let that = this

    this.$bus.on('currentCityData', (name, lv) => {
      if (name.indexOf('丽水') > -1) {
        that.title = '三台县域外川连通'
      } else {
        if (!name || name.length < 2) {
          that.title = '三台县域外川连通'
        } else {
          that.title = `三台县域外川连通`
        }
        //that.title = '思贤·域外商贸通'
      }
    })
  },
  watch: {},

  methods: {
    _getDate() {
      let date = new Date()
      this.yyr = formatDate(date, 'yyyy-MM-dd')
      this.$emit('yyrEmit', this.yyr)
    },
  },
}
</script>

<style lang="scss" scoped>
.big_header {
  width: 3840px;
  height: 280px;
  position: relative;
  display: flex;
  left: -1000px;
  justify-content: center;
  align-items: center;
  .ls-logo {
    height: 130px;
    top: -7px;
    position: relative;
    left: -25px;
  }
  .line_1 {
    width: 2400px;
    height: 350px;
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
  }
  .line_2 {
    width: 100%;
    height: 20px;
    /*background: url('../../../assets/images/header_line.png') no-repeat;*/
    background-size: 100% 100%;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  /* 87,116,143 */
  /* 129,160,187 */
  .header_title {
    font-size: 90px;
    line-height: 120px;
    font-family: 'FZDHTJW--GB1-0, FZDHTJW--GB1';
    background: linear-gradient(to bottom, rgb(124, 158, 183) 0%, rgb(168, 209, 233) 100%);
    -webkit-background-clip: text;
    color: transparent;
    padding-bottom: 28px;
  }

  .span_wrap {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 100px;
    font-size: 18px;
    line-height: 18px;
    color: rgb(70, 92, 119);
    margin-right: 15px;
  }
  .span_wrap img {
    width: 20px;
    height: 20px;
    margin-right: 15px;
  }
  .span_wrap span {
    margin-right: 15px;
    color: #d8dce4;
  }
}
</style>
